<template>
  <div>
    <div class="box">
      <div
        v-for="item in lints"
        :key="item.id"
        class="box-item"
        @click="$router.push(`/info/${item.id}`)"
      >
        <!-- /${lints.id} -->
        <img :src="item.img_url" />
        <p>{{ item.title }}</p>
        <div class="beijing">
          <span class="hong">￥{{ item.market_price }}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <s>￥{{ item.sell_price }}</s>
          <br />
          <div class="feijie">
            <span>热卖中</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span>剩余{{ item.stock_quantity }}件</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pageindex } from "@/apis/category";
export default {
  data() {
    return { lints: [] };
  },
  async created() {
    const res = await pageindex();
    console.log(res);
    this.lints = res.data.message;
    console.log(this.lints);
  },
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  .box-item {
    width: 170px;
    font-size: 11px;
    background-color: #ffffff;
    border: 1px solid #cecece;
    img {
      height: 100px;
    }
    p {
      margin: 7px;
    }
    .hong {
      color: red;
    }
    .feijie {
      margin-top: 10px;
    }
    .beijing {
      width: 170px;
      height: 50px;
      background-color: #f0f0f0;
    }
    s {
      color: #b5ad99;
    }
  }
}
</style>